<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->

    <!-- 定义视口宽度  -->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>touch 手机端 </title>
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>  
    <style>
        #box{
            width:200px;
            height:200px;
            background: darkorange;
        }
        *{
            margin:0;
            padding:0;
        }
        .app{
            width:100%;
            height:800px;
            margin-top:400px;
            background: darkmagenta;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="box" onclick="dbclickFunc()"></div>
    <div class="app" id="app" onclick="todoclick()"> </div>
    <script>
        console.log(document.body.clientWidth)
        console.log(window.devicePixelRatio)   // 设备像素密度比 

        function dbclickFunc(){
            console.log("dbclick")
        }

        function todoclick(){
            console.log(this)
        }
        var startY = 0;
        var endY = 0;
        document.getElementById("app").addEventListener("touchstart",function(e){
            console.log('touchstart')
            console.log(e)
            e= e || window.event;
            // e.preventDefault()
            console.log(e)
            console.log(this)
            startY = e.touches[0].clientY;
            this.innerHTML = `<h2> clientX: ${e.touches[0].clientX}  </h2>`
                           + `<h2> clientY: ${e.touches[0].clientY}  </h2>`
                           + `<h2> pageX: ${e.touches[0].pageX}  </h2>`
                           + `<h2> pageY: ${e.touches[0].pageY}  </h2>`
                           + `<h2> screenX: ${e.touches[0].screenX}  </h2>`
                           + `<h2> screenY: ${e.touches[0].screenY}  </h2>`



        },false)

        document.getElementById("app").addEventListener("touchmove",function(e){
            console.log('touchmove')
            this.innerHTML = `<h2> clientX: ${e.touches[0].clientX}  </h2>`
                           + `<h2> clientY: ${e.touches[0].clientY}  </h2>`
                           + `<h2> pageX: ${e.touches[0].pageX}  </h2>`
                           + `<h2> pageY: ${e.touches[0].pageY}  </h2>`
                           + `<h2> screenX: ${e.touches[0].screenX}  </h2>`
                           + `<h2> screenY: ${e.touches[0].screenY}  </h2>`
                           + `<h2> 滚动距离  : ${e.touches[0].pageY - e.touches[0].clientY}   </h2>`

        },false)

        // 手势离开屏幕
        document.getElementById("app").addEventListener("touchend",function(e){
            console.log('touchend')
            console.log(e)
            const touch = e.changedTouches[0]  // 最新的上一次的手势集合对象  
            this.innerHTML = `<h2> clientX: ${touch.clientX}  </h2>`
                           + `<h2> clientY: ${touch.clientY}  </h2>`
                           + `<h2> pageX: ${touch.pageX}  </h2>`
                           + `<h2> pageY: ${touch.pageY}  </h2>`
                           + `<h2> screenX: ${touch.screenX}  </h2>`
                           + `<h2> screenY: ${touch.screenY}  </h2>`
                           + `<h2> 滚动距离  : ${touch.pageY - touch.clientY}   </h2>`
            endY = touch.clientY;

            if(startY>endY){
                this.innerHTML += 'up 向上滑动'
            }else{
                this.innerHTML += 'down  向下滑动'
            }
        },false)


        // jquery  可以绑定touch 系列事件 但是不能获取 touch 手势集合 
        $("#app").on("touchstart",function(e){
            console.log('jquery -touchstart  ')
            console.log(e)
        })
    </script>
</body>
</html>